<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<!--1、使用Vue的数据双向绑定 完成如下功能-->
<!--1) 当用户在输入框输入1.jpg 、2.jpg 、3.jpg时可以切换显示对应的图片-->
<!--2) 使用Vue的数据双向绑定完成-->
<body>
<div id="app">
    <h1>请输入图片名称1.jpg-2.jpg-3.jpg</h1>
    <!--
    1. 这里我们使用了数据的双向渲染-data{} 数据池的 img_src
    -->
    <input type="text" v-model="img_src"><br/>
    <img :src="img_src" :height="img_height"><br/>
    <img src="1.jpg" :height="img_height">
    <img src="2.jpg" :height="img_height">
    <img src="3.jpg" :height="img_height">
</div>
<script src="vue.js"></script>
<script>
    let vm = new Vue({
        el: "#app",
        data:{
            img_src: "1.jpg",
            img_height: "100px"
        }
    })
</script>
</body>
</html>